<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" ref="searchForm" :model="searchForm">
            <el-form-item prop="notifyState" label="通知状态:">
              <el-select v-model="searchForm.notifyState" :clearable="true" placeholder="请选择状态">
                <el-option v-for="item in statusList_s" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="notifyType" label="警报类型:">
              <el-select v-model="searchForm.notifyType" :clearable="true" placeholder="请选择类型">
                <el-option v-for="item in typeList_s" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="address" label="事故地点:">
              <el-input v-model="searchForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item prop="villageId" label="小区:">
              <el-select v-model="searchForm.villageId" :clearable="true" filterable placeholder="请选择小区">
                <el-option v-for="item in villageList_s" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <br />
            <el-form-item prop="allTime" label="发生时间:">
              <el-date-picker
                v-model="searchForm.allTime"
                :clearable="true"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
    <el-row ref="tableRow">
      <el-table ref="tableList" :data="tableList" :fit="true">
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column label="事故时间" align="center" width="160">
          <template slot-scope="scope">
            {{ scope.row.createDate }}
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="事故地点" width="auto"> </el-table-column>
        <el-table-column prop="notifyType" align="center" label="事故类型" width="160">
          <template slot-scope="scope">
            {{ scope.row.notifyType | typeFilters }}
          </template>
        </el-table-column>
        <el-table-column label="通知对象" align="center" width="auto">
          <template slot-scope="scope"> {{ scope.row.villageName }}{{ scope.row.buildNames }}{{ scope.row.unitNames }}{{ scope.row.floorNames }}{{ scope.row.houseNumber }} </template>
        </el-table-column>
        <el-table-column prop="notifyState" align="center" label="通知状态" width="230">
          <template slot-scope="scope">
            <el-tag effect="dark" size="mini" :type="statusClass(scope.row.notifyState)">{{ scope.row.notifyState | statusFilters }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" v-has="permissionView" @click="operateClick(scope.row, 1)">查看</el-button>
              <el-button size="mini" v-if="scope.row.notifyState === 5 || scope.row.notifyState === -1" v-has="permissionRepeat" @click="operateClick(scope.row, 2)">一键重播</el-button>
              <!-- 报告单操作 -->
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        layout="total, sizes, jumper, next, pager, prev"
        :total="page.total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import noticeApi from '@/api/message/notice';
import VillageApi from '@/api/address/village';
export default {
  name: 'NoticeManagement',
  inject: ['reload'], //注入局部刷新
  data() {
    return {
      page: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      searchForm: {
        notifyState: '',
        notifyType: '',
        address: '',
        allTime: '',
        beginTime: '',
        endTime: '',
        villageId: '',
      },
      typeList_s: [
        { value: 'fire', label: '火警' },
        { value: 'gasLeak', label: '燃气泄漏' },
        { value: 'lockOpen', label: '被盗风险' },
        { value: 'soak', label: '水浸溢水' },
        { value: 'sos', label: '紧急求助' },
        { value: 'fall', label: '洪涝灾害' },
        { value: 'liftFault', label: '电梯故障' },
        { value: 'waterOff', label: '停水' },
        { value: 'blackOut', label: '停电' },
        { value: 'other', label: '其他' },
      ],
      statusList_s: [
        { value: '1', label: '通知中' },
        { value: '5', label: '部分成功' },
        { value: '-1', label: '通知失败' },
        { value: '10', label: '通知成功' },
      ],
      villageList_s: [],

      tableList: [],
      permissionRepeat: 'SYSTEM_MANAGER_MESSAGE_NOTICE_LIST_REPEAT',
      permissionView: 'SYSTEM_MANAGER_MESSAGE_NOTICE_LIST_VIEW',
    };
  },
  mounted() {
    window.addEventListener('keydown', this.keyDown);
    this.listTable();
    this.getVillageList();
    this.getTableHeight();
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  methods: {
    keyDown(e) {
      //如果是回车则执行查询方法
      if (e.keyCode === 13) {
        this.onSearch();
      }
    },
    onSearch() {
      this.page.pageNo = 1;
      this.listTable();
    },
    resetForm() {
      this.$refs.searchForm.resetFields();
      this.onSearch();
    },
    getTableHeight() {
      this.$nextTick(function () {
        this.maxHeight = window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        window.onresize = () => {
          this.maxHeight = window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        };
      });
    },
    statusClass(val) {
      switch (val) {
        case 1:
          val = 'default';
          break;
        case 5:
          val = 'warning';
          break;
        case -1:
          val = 'danger';
          break;
        case 10:
          val = 'success';
          break;
      }
      return val;
    },
    operateClick(e, type) {
      // 1 查看 2 重播
      switch (type) {
        case 1:
          this.$router.push({
            path: '/message/noticeDetail?notifyId=' + e.notifyId,
          });
          break;
        case 2:
          noticeApi
            .noticeRepeat({ notifyId: e.notifyId })
            .then((res) => {
              this.$Utils.notifySuccess();
            })
            .catch((error) => {});
          break;
      }
    },
    listTable() {
      let data = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        notifyState: this.searchForm.notifyState,
        notifyType: this.searchForm.notifyType,
        address: this.searchForm.address,
        villageId: this.searchForm.villageId,
      };
      if (this.searchForm.allTime && this.searchForm.allTime.length === 2) {
        data.beginTime = this.$Utils.formatDate(this.searchForm.allTime[0], 'yyyy-MM-dd hh:mm:ss');
        data.endTime = this.$Utils.formatDate(this.searchForm.allTime[1], 'yyyy-MM-dd hh:mm:ss');
      }
      this.$emit('show-loading', true);
      noticeApi
        .noticeList(data)
        .then((res) => {
          this.tableList = res.data.list;
          this.page.total = res.data.total;
          this.$refs.tableList.bodyWrapper.scrollTop = 0;
          this.$emit('show-loading', false);
        })
        .catch((error) => {
          this.$emit('show-loading', false);
        });
    },
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.listTable();
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.listTable();
    },
    async getVillageList() {
      const { data } = await VillageApi.villageList();
      this.villageList_s = data || [];
    },
  },
  filters: {
    typeFilters(val) {
      switch (val) {
        case 'fire':
          val = '火警';
          break;

        case 'gasLeak':
          val = '燃气泄漏';
          break;

        case 'lockOpen':
          val = '被盗风险';
          break;
        case 'soak':
          val = '水浸溢水';
          break;
        case 'sos':
          val = '紧急求助';
          break;
        case 'fall':
          val = '洪涝灾害';
          break;
      }
      return val;
    },
    statusFilters(val) {
      switch (val) {
        case 1:
          val = '通知中';
          break;
        case 5:
          val = '部分通知';
          break;
        case -1:
          val = '通知失败';
          break;
        case 10:
          val = '通知成功';
          break;
      }
      return val;
    },
  },
};
</script>

<style lang="scss">
@import '@/assets/css/views/content.scss';
</style>
